<template>
  <div class="flex w-full h-full flex-col items-center justify-center">
    <vue-esign
      class="border-[1px] border-white"
      ref="esign"
      :width="width"
      :height="height"
      :isCrop="isCrop"
      :lineWidth="lineWidth"
      :lineColor="lineColor"
      :bgColor="bgColor"
    />
    <div class="mt-5">
      <el-button @click="resetForm">返回</el-button>
      <el-button @click="clear" type="primary">清除签名</el-button>
      <el-button @click="save" type="primary">保存</el-button>
      <el-button @click="savePath" type="primary">下载签名</el-button>
      <el-button @click="preview" type="primary">预览</el-button>
    </div>
  </div>
  <el-dialog v-model="dialogVisible" title="签名预览" width="1000">
    <div>
      <el-image :src="imageSiginUrl" />
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">关闭</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref } from "vue";
import vueEsign from "vue-esign";
import { ElMessage } from "element-plus";
import router from "@/router";

const props = defineProps({
  modelValue: {
    type: String,
    default: "",
  },
  width: {
    //画布宽度，即导出图片的宽度
    type: Number,
    default: 1000,
  },
  height: {
    //画布高度，即导出图片的高度
    type: Number,
    default: 500,
  },
  lineWidth: {
    //画笔粗细
    type: Number,
    default: 4,
  },
  lineColor: {
    //画笔颜色
    type: String,
    default: "#fff",
  },
  bgColor: {
    //画布背景色，为空时画布背景透明，支持多种格式 '#ccc'，'#E5A1A1'，'rgb(229, 161, 161)'，'rgba(0,0,0,.6)'，'red'
    type: String,
    default: "#000",
  },
  isCrop: {
    // 是否裁剪，在画布设定尺寸基础上裁掉四周空白部分
    type: Boolean,
    default: false,
  },
  isClearBgColor: {
    // 清空画布时(reset)是否同时清空设置的背景色(bgColor)
    type: Boolean,
    default: false,
  },
  format: {
    //生成图片格式 image/jpeg(jpg格式下生成的图片透明背景会变黑色请慎用或指定背景色)、 image/webp
    type: String,
    default: "image/png",
  },
  quality: {
    //生成图片质量；在指定图片格式为 image/jpeg 或 image/webp的情况下，可以从 0 到 1 的区间内选择图片的质量。如果超出取值范围，将会使用默认值 0.92。其他参数会被忽略。
    type: Number,
    default: 1,
  },
  imgFormat: {
    //下载图片格式
    type: String,
    default: "png",
  },
});
const emits = defineEmits(["update:modelValue"]);

const esign = ref<any>(null);
const imageSiginUrl = ref<string>("");
const dialogVisible = ref<boolean>(false);
// 清除签名
function clear() {
  try {
    esign.value.reset();
  } catch (err) {
    console.error(err);
  } finally {
  }
}
// 导出数据（组件使用）
function save() {
  try {
    esign.value
      .generate()
      .then((res: any) => {
        emits("update:modelValue", res);
      })
      .catch((err: any) => {
        ElMessage.error(err); // 画布没有签字时会执行这里 'Not Signned'
      });
  } catch (err) {
    console.error(err);
  } finally {
  }
}
// 下载签名为图片
function savePath() {
  try {
    esign.value
      .generate()
      .then((res: any) => {
        var base64 = res.toString(); // imgSrc 就是base64哈
        var byteCharacters = atob(
          base64.replace(/^data:image\/(png|jpeg|jpg);base64,/, "")
        );
        var byteNumbers = new Array(byteCharacters.length);
        for (var i = 0; i < byteCharacters.length; i++) {
          byteNumbers[i] = byteCharacters.charCodeAt(i);
        }
        var byteArray = new Uint8Array(byteNumbers);
        var blob = new Blob([byteArray], {
          type: undefined,
        });
        var aLink = document.createElement("a");
        aLink.download = `签名.${props.imgFormat}`; //这里写保存时的图片名称
        aLink.href = URL.createObjectURL(blob);
        aLink.click();
      })
      .catch((err: any) => {
        ElMessage.error(err); // 画布没有签字时会执行这里 'Not Signned'
      });
  } catch (err) {
    console.error(err);
  } finally {
  }
}
// 预览签名
function preview() {
  try {
    esign.value
      .generate()
      .then((res: any) => {
        dialogVisible.value = true;
        imageSiginUrl.value = res;
      })
      .catch((err: any) => {
        ElMessage.error(err); // 画布没有签字时会执行这里 'Not Signned'
      });
  } catch (err) {
    console.error(err);
  } finally {
  }
}
// 关闭返回首页
function resetForm() {
  router.replace("/");
}
</script>

<style scoped></style>
